<template>
  <div id="eassy">
    <div>
      <h3 class="title">{{title}}</h3>
      <p class="subhead">
        <span>文章来源：会贸网</span>
        <span>2019/3/24</span>
        <span>关注人数：10000+</span>
        <router-link to>查看此展会详细页</router-link>
        <router-link to>美食消费品</router-link>
      </p>
      <div class="subhead subheads">
        <div class="shraf" style="width:40px;">分享：</div>
        <div class="shraf" style="width: 10px;">【</div>
        <div class="shraf">
          <img src="../../assets/consult_details/QQ.png" alt class="reafs" />
        </div>
        <div class="shraf">
          <img src="../../assets/consult_details/wx.png" alt class="reafs" />
        </div>
        <div class="shraf">
          <img src="../../assets/consult_details/wb.png" alt class="reafs" />
        </div>
        <div class="shraf" style="width: 10px;">】</div>
      </div>
    </div>
    <div>
      <p class="contentText">{{content[0].text}}</p>
      <div class="top_banner">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(slide, index) in banner" :key="index">
            <img :src="slide" alt style="width:100%;display:block;" />
          </swiper-slide>
        </swiper>
        <div class="swiper-Btn-next server_nextBtn"></div>
        <div class="swiper-Btn-prev server_prevBtn"></div>
      </div>
      <p class="contentText">{{content[1].text}}</p>
      <p class="contentText">{{content[2].text}}</p>
    </div>
    <div>
      <div class="pageContainer clearflx">
        <!-- 当前页面展示多少条数据 -->
        <div class="pageSizeInner">
          <span class="totalCount">共{{totalNum}}页</span>
          <!-- <div class="pageSize">
                <select v-model="perPageCount" @change="changePerPageCount">
                  <option :value="item" v-for="(item, index) in page_size" :key="index">{{item}}</option>9
                </select>
          </div>-->
        </div>
        <!-- 页码部分 -->
        <ul class="pagesInner">
          <!-- 上一页 -->
          <li class="page" :class="{noClick : pageNum == 1}" @click="preOrNext(-1)">
            <span class="page-btn">上一页</span>
          </li>
          <!-- 页码 -->
          <li
            class="page"
            :class="{actived : item === pageNum}"
            v-for="(item, index) in displayPages"
            :key="index"
            @click="select(item)"
          >
            <span>{{item}}</span>
          </li>
          <!-- 下一页 -->
          <li class="page" :class="{noClick : pageNum == totalNum}" @click="preOrNext(1)">
            <span class="page-btn">下一页</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    content: Array,
    title: String
  },
  data() {
    return {
      swiperOption: {
        //   pagination: {
        //     el: '.swiper-pagination'
        //   },
        slidesPerView: 5,
        // 底部间距
        spaceBetween: 18,
        // slidesPerGroup: 5,
        loop: true,
        autoplay: true,
        loopFillGroupWithBlank: true,
        navigation: {
          nextEl: ".server_nextBtn",
          prevEl: ".server_prevBtn"
        }
      },
      banner: [
        "../../assets/consolut/1.jpg",
        "../../assets/consolut/2.jpg",
        "../../assets/consolut/3.jpg",
        "../../assets/consolut/4.jpg",
        "../../assets/consolut/5.jpg"
      ],
      currentPage1: 1,
      //   totalCount: 690, // 总共多少条数据
      //   page_size: ["100条/页", "200条/页", "300条/页", "400条/页"], // 每页展示多少条数据
      pageNum: 1, // 当前页码
      totalNum: 6, // 总页码
      middleSize: 3 // 中间显示几个页码
      //   每页显示多少条数据
      //   perPageCount: 9
    };
  },
  computed: {
    // 展示页码
    displayPages() {
      // ① 只展示'上一页'、'页码'、'下一页'
      if (this.totalNum <= this.middleSize + 2) {
        let pages = [];
        for (let i = 1; i <= this.totalNum; i++) {
          pages.push(i);
        }
        return pages;
      } else if (this.pageNum <= this.middleSize) {
        // this.pageNum <= this.middleSize+2
        // ② 只展示右侧'...'，只要当前页码小于或者等于要展示的中间页码时就展示
        let pages = [1];
        for (let i = 2; i < this.middleSize + 1; i++) {
          pages.push(i);
        }
        pages.push("...");
        pages.push(this.totalNum);
        return pages;
      } else if (this.pageNum >= this.totalNum - (this.middleSize - 1)) {
        // ③ 只展示左侧'...'，主要当前页码 大于或等于 总页码-(中间要展示页码的个数 - 1)就展示
        let pages = [1, "..."];
        for (
          let i = this.totalNum - this.middleSize + 1;
          i <= this.totalNum;
          i++
        ) {
          pages.push(i);
        }
        return pages;
      } else {
        // ④ 展示左右两侧的'...'
        let pages = [1, "..."];
        // 当左右两侧的...都展示时，中间的页码该如何展示呢？其实就是 当前页码 - (中间要展示页码的个数/2向下取整) 到 当前页码 + (中间要展示页码的个数/2向下取整)即可
        const half = Math.floor(this.middleSize / 2); // 向下取整
        for (let i = this.pageNum - half; i <= this.pageNum + half; i++) {
          pages.push(i);
        }
        pages.push("...");
        pages.push(this.totalNum);
        return pages;
      }
    }
  },
  mounted() {
    // 每页展示多少条数据
    // this.perPageCount = this.page_size[0];
    // 计算总页码是多少
    // this.totalNum = Math.ceil(this.totalCount / parseInt(this.perPageCount));
  },
  methods: {
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   // console.log(`当前页: ${val}`);
    // },
    // 点击'上一页'、'下一页'
    preOrNext(n) {
      this.pageNum = this.pageNum + n;
      this.pageNum <= 1
        ? (this.pageNum = 1)
        : this.pageNum > this.totalNum
        ? (this.pageNum = this.totalNum)
        : null;
      // 作为子组件，当前页码发生改变时需要通知父组件
      // this.$emit('pageNumChanged', this.pageNum);
    },
    // 点击'页码'
    select(item) {
      if (typeof item === "string") return;
      if (item == this.pageNum) return;
      this.pageNum = item;
      // 作为子组件，当前页码发生改变时需要通知父组件
      // this.$emit('pageNumChanged', this.pageNum);
    }
    // 选择页面展示条数，重新计算总页码
    // changePerPageCount() {
    //   this.totalNum = Math.ceil(this.totalCount / parseInt(this.perPageCount));
    // }
  }
};
</script>
<style lang="scss" scoped>
#eassy {
  color: #000;
  border-right: 1px solid #e9e8e9;
  border-bottom: 1px solid #e9e8e9;
  padding-right: 20px;
  padding-left: 20px;
  .title {
    color: #c81622;
    font-size: 24px;
    padding-top: 80px;
    font-weight: 500;
  }
  .subhead {
    font-size: 12px;
    padding: 10px 0;
    color: #848484;
    span {
      padding: 0 4px;
      // display: flex;
      
    }
    a {
      color: #c81622;
      padding: 0 10px 0 6px;
    }
    .shraf{
      display: flex;
      width: 24px;
      height: 20px;
      justify-content: space-around;
      align-items: center;
      float: left;
      .reafs {
        width: 16px;
        height: 16px;
        display: block;
      }
    }
  }
  .subheads{
    color:#000;
    padding-top:0;
    padding-bottom:35px;
    width: 144px;
    margin: 0 auto;
  }
  .contentText {
    text-indent: 2em;
    text-align: justify;
    line-height: 24px;
  }
  .top_banner {
    width: 100%;
    height: 140px;
    position: relative;
    .swiper-container {
      width: 736px;
      height: 100%;
      //   padding: 0px 20px;
      box-sizing: border-box;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-Btn-next,
    .swiper-Btn-prev {
      position: absolute;
      z-index: 10;
      width: 18px;
      height: 40px;
      text-align: center;
      //   line-height: 30px;
      //   font-size: 24px;
      top: 50%;
      margin-top: -20px;
      cursor: pointer;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .swiper-Btn-prev {
      left: 0;
      background-image: url("../../assets/banner_prev.png");
    }
    .swiper-Btn-next {
      right: 0;
      background-image: url("../../assets/banner_next.png");
    }
  }
  .pageContainer {
    // display: flex;
    // justify-content: space-between;
    width: 400px;
    margin: 0 auto;
    font-size: 14px;
    padding-bottom: 10px;
    margin-top: 26px;
    .pageSizeInner {
      // display: inline-block;
      height: 40px;
      line-height: 40px;
      float: left;
      // margin-left: 80px;
      .totalCount {
        display: block;
        margin: 5px;
        height: 30px;
        line-height: 30px;
        color: #c1c1c1;
      }
      // .pageSize {
      //   display: inline-block;
      //   > select {
      //     padding: 0 3px;
      //     width: 100px;
      //     height: 30px;
      //     font-size: 12px;
      //     border: 1px solid #eee;
      //     border-radius: 2px;
      //     box-sizing: border-box;
      //     outline: none;
      //   }
      // }
    }
    .pagesInner {
      // display: inline-block;
      text-align: center;
      float: left;
      li {
        display: inline-block;
        margin: 5px;
        list-style: none;
        > span {
          display: block;
          width: 30px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          font-size: 12px;
          border: 1px solid #eee;
          // border-radius: 5px;
          cursor: pointer;
        }
        > span.page-btn {
          width: 46px;
          height: 26px;
          line-height: 26px;
          padding: 0 4px;
          color: #c1c1c1;
        }
        &.noClick {
          > span {
            cursor: no-drop;
            // border-color: transparent;
          }
        }
        &.actived {
          > span {
            border-color: #c81622;
            background-color: #c81622;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>